import { reactive } from 'vue'

// 定义表单数据规范
interface RegiserForm {
    username: string;
    email: string;
    password: string;
    checkPassword: string;
    level: string;
}


// 定义表单校验规则规范
interface RegisterRules {
    username: (
        | {
            required: boolean;
            trigger: string;
            message: string;
            min?: undefined;
            max?: undefined;
        }
        | {
            min: number;
            max: number;
            trigger: string;
            message: string;
            required?: undefined;
        }
    )[];
    email: (
        | {
            required: boolean;
            trigger: string;
            message: string;
            type?: undefined;
        }
        | {
            type: string;
            trigger: string;
            message: string;
            required?: undefined;
        }
    )[];
    password: (
        | {
            required: boolean;
            trigger: string;
            message: string;
            min?: undefined;
            max?: undefined;
        }
        | {
            min: number;
            max: number;
            trigger: string;
            message: string;
            required?: undefined;
        }
    )[];
    checkPassword: (
        | {
            required: boolean;
            trigger: string;
            message: string;
            min?: undefined;
            max?: undefined;
            validator?: undefined;
        }
        | {
            min: number;
            max: number;
            trigger: string;
            message: string;
            required?: undefined;
            validator?: undefined;
        }
        | {
            validator: (rules: any, val: string, callback: any) => void;
            trigger: string;
            required?: undefined;
            message?: undefined;
            min?: undefined;
            max?: undefined;
        }
    )[];
}


// 表单数据
export var regiserForm = reactive<RegiserForm>({
    username: "",
    email: "",
    password: "",
    checkPassword: "",
    level: "visitor"
});


// 确认密码校验
const checkIsSame = (rules: any, val: string, callback: any) => {
    if (val.trim() === "") {
        callback(new Error("请再次输入密码"));
    } else if (val !== regiserForm.password) {
        callback(new Error("两次输入密码不一致!"));
    } else {
        callback();
    }
};


// 表单校验规则
export const registerRules = reactive<RegisterRules>({
    username: [
        {
            required: true,
            trigger: "blur",
            message: "用户名必填"
        },
        {
            min: 4,
            max: 10,
            trigger: "blur",
            message: "用户名长度为4～10之间"
        }
    ],
    email: [
        {
            required: true,
            trigger: "blur",
            message: "邮箱为必填"
        },
        {
            type: "email",
            trigger: "blur",
            message: "请输入正确的邮箱格式"
        }
    ],
    password: [
        {
            required: true,
            trigger: "blur",
            message: "密码为必填"
        },
        {
            min: 6,
            max: 20,
            trigger: "blur",
            message: "密码长度在6～20之间"
        }
    ],
    checkPassword: [
        {
            required: true,
            trigger: "blur",
            message: "确认密码为必填"
        },
        {
            min: 6,
            max: 20,
            trigger: "blur",
            message: "密码长度在6～20之间"
        },
        {
            validator: checkIsSame,
            trigger: "blur"
        }
    ]
});